import React, { Suspense } from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes, Link, Route } from 'react-router-dom';
/* import Home from './pages/Home';
import User from './pages/User'; */
const Home = React.lazy(() => import('./pages/Home'));
const User = React.lazy(() => import('./pages/User'));
const Update = React.lazy(() => import('./pages/Update'));
const Immutable = React.lazy(() => import('./pages/Immutable'));
const TimeSlice = React.lazy(() => import('./pages/TimeSlice'));
const Virtual = React.lazy(() => import('./pages/Virtual'));
let root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
        <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/user">User</Link></li>
            <li><Link to="/update">Update</Link></li>
            <li><Link to="/Immutable">Immutable</Link></li>
            <li><Link to="/TimeSlice">TimeSlice</Link></li>
            <li><Link to="/Virtual">Virtual</Link></li>
        </ul>
        <Suspense fallback={<div>loading......</div>}>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/user" element={<User />} />
                <Route path="/update" element={<Update />} />
                <Route path="/Immutable" element={<Immutable />} />
                <Route path="/TimeSlice" element={<TimeSlice />} />
                <Route path="/Virtual" element={<Virtual />} />
            </Routes>
        </Suspense>
    </BrowserRouter>
);
